<script setup lang="ts">
import { computed, ref, watch } from 'vue'
 // 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}

//封装函数 如果持久化中没有存储数据，才读取默认列表，如果有就使用持久化的列表
function getFruitList (){
  if(localStorage.getItem('list') === null){
    // 没有值 就返回默认列表
    return defaultList.value
  }else{
    // 有值，就返回本地存储的值
   return  JSON.parse(localStorage.getItem('list')|| '[]')
  }
 
}

// 默认水果列表 将原本的fruitList 改成defaultList
const defaultList = ref<Fruit[]>([
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34,
  },
]) 
// 如果持久化中没有存储数据，才读取默认列表，如果有就使用持久化的列表
// const fruitList = localStorage.getItem('list') === null ? ref<Fruit[]>(defaultList.value) :ref<Fruit[]>(JSON.parse(localStorage.getItem('list') || '[]')) 

// 封装成函数getFruitList
const fruitList = ref<Fruit[]>(getFruitList())
// 监听水果列表数据变化
// 监听 fruitList.value 数组中的每个元素，当某个元素发生变化时，执行回调函数
watch(fruitList,()=>{
  // setItem：本地存储 fruitList.value
  localStorage.setItem('list',JSON.stringify(fruitList.value))
},{deep:true,immediate:true}) //deep:true 开启深度侦听 immediate:true 立即执行一次
// 删除水果
const deleteFruit =(id:number)=>{
  // 通过 id 进行删除数组中的 对应项 → filter（不会改变原数组，需重新赋值: fruitList.value）
  fruitList.value = fruitList.value.filter(item => item.id !== id)
}
// 减少水果
const decreaseFruit = (id:number) =>{
  // 通过find找到当前元素
  const activeItem = fruitList.value.find(item => item.id == id)
  // 写法一
  if(activeItem){
    activeItem.num--
  }
  // 写法二
  // activeItem && (activeItem.num--)
  
  // 通过findIndex找到下标
//   const activeIndex = fruitList.value.findIndex(item => item.id == id)
//   fruitList.value[activeIndex].num--
}
// 增加水果
const increaseFruit = (id:number)=>{
const activeItem = fruitList.value.find(item => item.id == id)
activeItem && (activeItem.num++)
}
// 通过计算属性，计算属性是否为全选状态
const isAllSelected = computed({
  // 获取计算结果
  get(){
    // 记得 return 返回 
    // 返回所有水果是否都被选中
// 通过 every 方法遍历 fruitList.value 数组中的每个元素
// 检查每个水果对象的 isChecked 属性是否为真
// 如果所有水果都被选中，则返回 true，否则返回 false
return fruitList.value.every(v => v.isChecked)
  },
  // 设置结果 计算结果被修改
  set(value){
    fruitList.value.forEach((item)=>{
      item.isChecked = value
    })
  }
})

// 1.计算选中的水果列表
 const selectedFruitList = computed(()=>{
  return fruitList.value.filter(v=>v.isChecked)
 })
// 2.总个数：找到选中的，累加个数即可
const totalCount = computed(()=>{
  // 基于选中的列表 计算出总个数
  return selectedFruitList.value.reduce((acc,item)=> acc + item.num,0)
})
// 3.总价格：找到选中的，累加个数乘以单价
const totalPrice = computed(()=>{
  return selectedFruitList.value.reduce((acc,item)=>acc + item.price * item.num ,0)
})


</script>


<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
     <!-- v-if: 判断 fruitList列表的长度是否大于0，大于0，显示购物车主体，否则显示空车 -->
    <div v-if ="fruitList.length > 0"  class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <!-- v-for: 循环 fruitList列表  key:唯一的标识 item:当前循环的元素-->
          <div v-for="item in fruitList" :key="item.id" class="tr active">
            <!-- v-model="item.isChecked ： 双向绑定选中状态 -->
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <!-- :src="item.icon ： 绑定图片路径  -->
            <div class="td"><img :src="item.icon" alt="" /></div>
            <!-- {{ item.price }}： 绑定价格 -->
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <!-- 计数器 -->
              <div class="my-input-number">
                <!-- disabled:禁用按钮，<= 1:禁用减号 -->
                <button :disabled="item.num <= 1" @click="decreaseFruit(item.id)" class="decrease"> - </button>
                <span class="my-input__inner">{{item.num}}</span>
                <button @click="increaseFruit(item.id)" class="increase"> + </button>
              </div>
            </div>
            <!-- {{item.price * item.num}}: 绑定小计 -->
            <div class="td">{{item.price * item.num}}</div>
            <div class="td"><button @click="deleteFruit(item.id)">删除</button></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <!-- v-model="isAllSelected"： 双向绑定全选状态 -->
          <input type="checkbox" v-model="isAllSelected" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
           <!-- &nbsp: 空格 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalPrice}}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{totalCount}})</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
     <!-- v-else: 当 fruitList列表的长度小于等于0，显示空车 -->
    <div v-else class="empty">🛒空空如也</div>
  </div>
</template>

<style scoped>
@import './styles/inputnumber.css';
@import './styles/index.css';
</style>